<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		    html,body{
		    	width: 100%;
		    	height: 100%;
		    	font-family: "微软雅黑";
		    	margin: 0;
		    	padding: 0;
		    }
		    a{
		    	text-decoration: none;
		    	color: #D5D5D5;
		    }
		    a:hover{
		    	text-decoration: underline;
		    }
			header{
				width: 100%;
				padding: 1rem 0;
				line-height: 1rem;
				background: #1C2B36;
				color: #D5D5D5;
				box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
			}
			header .logo{
				font-family: "Comic Sans MS";
				font-size: 2rem;
				float: left;
				margin-left: 1rem;
			}
			header .title{
				float: left;
				margin-left: 38rem;
				font-size: 1.4rem;
				
			}
			header .username{
				float: right;
				
			}
			header .username span{
				
				margin-right: 2rem;
			}
			header .username a{
				margin-left: 2rem;
			}
			.clearfix:before,
			.clearfix:after{
				display: table;
				content: "";
			}
			.clearfix:after{
				clear: both;
			}
			nav{
				width: 100%;
				padding: 1.5rem 0;
				border-top:1px solid #555555;
				background: #1C2B36;
			}
			nav ul{
				color: #FFFFFF;
			}
			nav ul li{
				display: inline-block;
				padding: 1rem;
				background: #5FB878;
				border-radius: 5px;
				cursor: pointer;
				border: 1px solid #5FB878;
			}
			nav ul li:hover{
				border: 1px solid #5FB878;
				background: #FFFFFF;
				color:#5FB878 ;
			}
			.active{
				border: 1px solid #5FB878;
				background: #FFFFFF;
				color:#5FB878 ;
			}
			nav ul li+li{
				margin-left: 2rem;
			}
			section .module-title{
				width: 100%;
				background: #F2F6FA;
				font-size: 1.4rem;
			}
			section .module-title span{
				display: inline-block;
				padding: 2rem 4rem;
			}
			
			@media only screen and (max-width:1820px ) {
				header .title{
				margin-left: 26rem;
			   }
			}
			@media only screen and (max-width:1400px ) {
				header .logo,header .title,header .username{
					float: none;
					text-align: center;
				}
				header .title{
					margin-top: 2rem;
					margin-left: 0rem;
				}
				header .username{
					margin-top: 2rem;
					
				}
			}
			
		</style>
	</head>
	<body>
		
		<div class="container">
			<header class="clearfix">
				<div class="logo">
					PRIME-RESEARCH
				</div>
				<div class="title">
					媒体管理系统
				</div>
				<div class="username">
					<span>欢迎你，外国人小姐<span>
					<a href="">安全退出</a>
				</div>
			</header>
			<nav>
				<ul>
					<li class="active">媒体评分</li>
					<li>指标管理</li>
					<li>评分列表</li>
					<li>数据管理</li>
				</ul>
			</nav>
			<section>
				<div class="module-title">
					<span>媒体评分</span>
				</div>
			</section>
		</div>
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript" charset="utf-8">
			$("nav ul li").each(function(){
				this.onclick = function(){
					$(this).addClass("active");
					$(this).siblings().removeClass("active");
					
					$(".module-title span").text($(this).text());
					
				}
			})
		</script>
	</body>
</html>
